<template>
  <div>
    <BasicModal
      @register="register"
      :title="title"
      width="600px"
      :destroyOnClose="true"
      :canFullscreen="false"
      :showOkBtn="false"
      :showCancelBtn="false"
    >
      <BasicForm @register="registerForm">
        <template #iconUrl="{ model, field }"> <ClipUploadImg v-model="model[field]" /> </template
      ></BasicForm>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, useForm } from '@/components/Form';
  import { ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { ClipUploadImg } from '@/components/Upload/index';
  import { CustomModalTypeEnum } from '@/enums/publicEnum';
  import { isArray } from '@/utils/is';
  import { productCategoryAdd, productCategoryEdit } from '@/api/hby/categoryManagement';
  import { CategorytListResult } from '@/api/hby/categoryManagement/types';

  const title = ref('');
  const type = ref<CustomModalTypeEnum>(CustomModalTypeEnum.Add);
  const { createMessage } = useMessage();

  const emit = defineEmits(['reload']);

  const typeMap = {
    [CustomModalTypeEnum.Add]: '新增类目',
    [CustomModalTypeEnum.AddChild]: '新建子类目',
    [CustomModalTypeEnum.Edit]: '编辑类目',
  };

  const [registerForm, { validate, setProps, setFieldsValue }] = useForm({
    schemas: [
      {
        field: 'id',
        component: 'Input',
        label: '字段主键',
        show: false,
      },
      {
        field: 'parentId',
        component: 'Input',
        label: 'parentId',
        show: false,
      },
      {
        field: 'name',
        label: '类目名称',
        component: 'Input',
        required: true,
      },
      {
        field: 'iconUrl',
        label: '类目图标',
        required: false,
        component: 'Upload',
        slot: 'iconUrl',
      },
      // {
      //   field: 'status',
      //   label: '状态',
      //   component: 'RadioButtonGroup',
      //   defaultValue: DataStatusEnum.Normal,
      //   componentProps: {
      //     options: [
      //       { label: dataStatusEnumText[DataStatusEnum.Normal], value: DataStatusEnum.Normal },
      //       { label: dataStatusEnumText[DataStatusEnum.Disable], value: DataStatusEnum.Disable },
      //     ],
      //   },
      // },
      {
        field: 'desc',
        label: '备注',
        component: 'InputTextArea',
        componentProps: {
          rows: 4,
        },
      },
    ],
    autoFocusFirstItem: true,
    actionColOptions: {
      span: 24,
    },
    labelWidth: 120,
    baseColProps: { span: 18 },
    submitButtonOptions: {
      text: '确认',
    },
    resetButtonOptions: {
      text: '取消',
    },
    submitFunc: async () => {
      const data: CategorytListResult = await validate();
      if (isArray(data.iconUrl)) {
        data.iconUrl = data.iconUrl[0];
      }
      setProps({
        submitButtonOptions: {
          loading: true,
        },
      });
      try {
        if (data.id) {
          await productCategoryEdit(data);
        } else {
          await productCategoryAdd(data);
        }
        setProps({
          submitButtonOptions: {
            loading: false,
          },
        });
        createMessage.success('提交成功！');
        emit('reload');
        closeModal();
      } catch (error) {
        setProps({
          submitButtonOptions: {
            loading: false,
          },
        });
      }
    },
    resetFunc: async () => {
      closeModal();
    },
  });

  const [register, { closeModal }] = useModalInner(
    async (data: { type: CustomModalTypeEnum; row: CategorytListResult }) => {
      type.value = data.type;
      if (data.type === CustomModalTypeEnum.Edit) {
        setFieldsValue(data.row);
      }
      if (data.type === CustomModalTypeEnum.AddChild) {
        setFieldsValue({
          parentId: data.row.parentId,
        });
      }
      title.value = typeMap[data.type];
    },
  );
</script>

<style lang="less" scoped></style>
